<template>
  <view class="chart-container">
    <!-- 图表容器 -->
    <qiun-data-charts type="ring" :chartData="chartData" :opts="chartOptions" @getIndex="handleTooltip"
      :onmovetip="true" :onzoom="true" :ontouch="true" :canvas2d="false" :canvasId="canvasId"
      @legendTap="handleLegendTap" @complete="onChartComplete" v-if="isChartReady" />

    <!-- 自定义Tooltip -->
    <view v-if="showCustomTooltip" class="custom-tooltip" :style="{
        left: tooltipPosition.x + 'px',
        top: tooltipPosition.y + 'px',
        'pointer-events': 'none',
      }">
      <view class="tooltip-hed">
        <view class="">{{
          tooltipData.titlName+':'+ tooltipData.volNum+'万吨 '+ tooltipData.propNum +'%'
          }}</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      canvasId: {
        type: String,
        default: "",
      },
      chartRef: {
        type: String,
        default: "",
      },
      chartData: {
        type: Object,
        default: () => { },
      },
      chartOptions: {
        type: Object,
        default: () => {
          {
          }
        },
      },
    },
    watch: {
      chartData(newVal) {
        this.showCustomTooltip = false;
      },
      showCustomTooltip(newVal) {
        if (newVal) {
          setTimeout(() => {
            this.showCustomTooltip = false;
          }, 3000);
        }
      },
    },
    data() {
      return {
        // Tooltip相关数据
        showCustomTooltip: false,
        isChartReady: false,
        tooltipPosition: { x: 0, y: 0 },
        tooltipData: {
          titlName: '',
          volNum: '',
          propNum: '',
        }
      };
    },
    mounted() {
      // 延迟初始化（确保容器挂载）
      setTimeout(() => {
        this.isChartReady = true;
      }, 1000);
    },
    created() {

    },
    methods: {

      // 处理Tooltip显示
      handleTooltip(e) {
        const series = e.opts._series_;
        const { x, y } = e.event;
        if (e.currentIndex === -1) {
          // 触摸离开
          this.showCustomTooltip = false;
          return;
        }
        let totalNum = 0
        series.forEach(item => {
          totalNum += item.value
        });
        this.$set(
          this.tooltipData,
          "titlName",
          series[e.currentIndex].name
        );
        this.$set(
          this.tooltipData,
          "volNum",
          ((Math.round(series[e.currentIndex].value * 100)) / 100) || 0
        );
        this.$set(
          this.tooltipData,
          "propNum",
          ((Math.round((series[e.currentIndex].value / totalNum) * 10000)) / 100) || 0
        );
        // 更新Tooltip位置
        this.tooltipPosition = {
          x: (x + 10) > 252 ? 252 : x + 10, // 水平偏移
          y: y - 10, // 垂直偏移
        };
        this.showCustomTooltip = true;
      },
      handleLegendTap(e) {
        console.log("点击的图例:", e.name, "是否选中:", e.selected);

        // 示例2：阻止默认显隐行为（完全自定义控制）
        // return false;  // 注释掉则保留默认显隐逻辑
      },
      onChartComplete(canvas, chart) {
        if (!chart) {
          console.error("Chart 对象未初始化！");
          return;
        }
        // 先解绑旧事件（避免重复绑定）
        if (chart.offLegendTap) chart.offLegendTap();

        // 绑定新事件
        chart.onLegendTap = (e) => {
          console.log("图例点击:", e.name);
        };
      },
    },
  };
</script>
<style lang="less" scoped>
  /* 图表容器 */
  .chart-container {
    width: 100%;
    height: 60rpx;
    position: relative;
  }

  /* 自定义Tooltip样式 */
  .custom-tooltip {
    position: absolute;
    min-width: 360rpx;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10rpx);
    z-index: 9999;
    transform: translate(-50%, -100%);
    transition: all 0.2s ease;
    min-height: 60rpx;
  }

  .tooltip-hed {
    padding: 4px 0 4px 0;
    text-align: left;
    width: 100%;
    font-size: 28rpx;
    font-weight: bold;
    color: #666;
  }
</style>